import { Form, Input, Button, Space, Card, Select } from "antd";

interface SearchFormProps {
  onSearch: (values: { name: string }) => void; // 搜索回调函数
  onReset: () => void; // 重置回调函数
}
// 搜索表单组件
export default function SearchForm({ onSearch, onReset }: SearchFormProps) {
  const [form] = Form.useForm();
  // 提交表单
  const handleSubmit = (values: { name: string }) => {
    onSearch(values); // 调用父组件传递的搜索回调函数
  };

  // 重置表单
  const handleReset = () => {
    form.resetFields(); // 重置表单字段
    onReset(); // 调用父组件传递的重置回调函数
  };

  return (
    <Card style={{ marginBottom: 16 }}>
      <Form form={form} onFinish={handleSubmit} className={'flex'} layout="inline">
        <Form.Item
          className={'w-1/4'}
          label="姓名"
          name="name"
          rules={[{ required: true, message: "请输入姓名" }]}
        >
          <Input placeholder="请输入姓名" />
        </Form.Item>
        <Form.Item
          className={'w-1/4'}
          label="性别"
          name="age"
          rules={[{ required: true, message: "请选择性别" }]}
        >
          <Select placeholder="请选择性别">
            <Select.Option value="male">男</Select.Option>
            <Select.Option value="female">女</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
            <Button htmlType="button" onClick={handleReset}>
              重置
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Card>
  );
}
